<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/page/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/page/css/select.css"/>
</head>
<body>
<form class="layui-form layui-form-pane" lay-filter="addClient" action="" id="content">
    <div class="layui-inline" style="margin-left: 20px; margin-top: 20px;">
        <form class="layui-form layui-form-pane" action="javascript:;">
            <div class="layui-form-item" id="addressDiv">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <select name="clientProvince" lay-filter="province" id="clientProvince"
                            v-model="onedecClient.clientProvince">
                        <option></option>
                    </select>
                </div>

                <div class="layui-input-inline">
                    <select name="clientCity" lay-filter="city" id="clientCity" v-model="onedecClient.clientCity">
                        <option></option>
                    </select>
                </div>

                <div class="layui-input-inline">
                    <select name="clientArea" lay-filter="area" id="clientArea" v-model="onedecClient.clientArea">
                        <option></option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <div class="layui-input-block">
                        <input type="text" name="clientAddr" required style="margin-left: -110px;width: 190px;"
                               placeholder="请输入详细地址"
                               id="clientAddr" class="layui-input" v-model="onedecClient.clientAddr">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 20px">
                <label class="layui-form-label" style="">客户状态</label>
                <div class="layui-input-inline">
                    <select id="clientStatus" name="clientStatus" v-model="onedecClient.clientStatus">
                        <option value="0">请选择状态</option>
                        <option value="1">未装修</option>
                        <option value="2">已签单</option>
                        <option value="3">已装修</option>
                        <option value="4">无意向</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input type="button" id="searchBtn" value="搜索" data-type="reload" class="layui-btn"
                           style="width: 130px;"></input>
                </div>
            </div>
    </div>
</form>
</div>
</form>
</div>
<table id="clients" lay-filter="test"></table>
<script src="/page/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/page/js/select.js" type="text/javascript" charset="utf-8"></script>
<script src="/page/js/jquery-3.5.1.min.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#clients'
            , height: 465
            , url: '/client/client/list' //数据接口
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , limit: 10 //一页显示多少条
                , limits: [5, 10, 15]//每页条数的选择项
                , groups: 2 //只显示 2 个连续页码

            }
            , parseData: function (res) {
                if (res.code == 200) {
                    res.code = 0
                }
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.totalNum,
                    "data": res.data.data,
                }
            }
            , id: 'reload'
            , cols: [[ //表头
                {field: 'id', title: '序号', width: 80, sort: true, fixed: 'left', align: 'center', type: 'numbers'}
                , {field: 'clientName', title: '客户名', width: 120, align: 'center'}
                , {field: 'clientTel', title: '客户联系方式', width: 170, align: 'center'}
                , {field: 'clientProvince', title: '省份', width: 110, align: 'center'}
                , {field: 'clientCity', title: '城市', width: 110, align: 'center'}
                , {field: 'clientArea', title: '区县', width: 110, sort: true, align: 'center'}
                , {field: 'clientAddr', title: '详细地址', width: 250, sort: true, align: 'center'}
                , {field: 'clientHousearea', title: '房屋面积', width: 120, align: 'center',templet:function (e) {
                        return e.clientHousearea+"m²"
                    }}
                , {field: 'clientStatus', title: '状态', width: 120, align: 'center', templet: function (d) {
                        if (d.clientStatus == 1) {
                            return '未装修'
                        }
                        if (d.clientStatus == 2) {
                            return '已签单'
                        }
                        if (d.clientStatus == 3) {
                            return '已装修'
                        }
                        if (d.clientStatus == 4) {
                            return '无意向'
                        }
                    }
                }
                , {field: 'clientBak1', title: '所属员工', width: 135, sort: true, align: 'center'}
            ]]
        });
        /*var $ = layui.$, active = {
            reload: function(){
                var clientProvince = $('#clientProvince');
                var clientArea = $('#clientArea');
                var clientAddr = $('#clientAddr');
                var clientStatus = $('#clientStatus');
                console.log(clientProvince.val())
                //执行重载
                table.reload('reload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            clientProvince: clientProvince.val(),
                            clientArea: clientArea.val(),
                            clientAddr: clientAddr.val(),
                            clientStatus: clientStatus.val(),
                        }
                    }
                }, 'data');
            }
        };*/
        $("#searchBtn").on('click', function () {
            var clientProvince = $('#clientProvince');
            var clientCity = $('#clientCity');
            var clientArea = $('#clientArea');
            var clientAddr = $('#clientAddr');
            var clientStatus = $('#clientStatus');

            table.reload("reload", {
                method: 'get',
                where: {
                    clientProvince: clientProvince.val() == '全部' ? '' : clientProvince.val(),
                    clientCity: clientCity.val() == '全部' ? '' : clientCity.val(),
                    clientArea: clientArea.val() == '全部' ? '' : clientArea.val(),
                    clientAddr: clientAddr.val(),
                    clientStatus: clientStatus.val(),
                },
                page: {
                    curr: 1
                }
            })
        });
    });
</script>
</body>
</html>